import { ComponentProps, Hook, Link, Mut, VueComponent } from "vue3-oop"
import { Card,Space,Button,Layout,LayoutSider,LayoutContent,Modal,message,notification } from 'ant-design-vue'

import FdnConfig from "./fdn-config";
import FdnReserve from './fdn-reserve'
import FdnDraft from './fdn-draft'
import FormPreview from './fdn-preview'

import moduleCss from './styles/index.module.scss'

import FormData from './types/FormData'

interface IProps {}
export default class FormDesigner extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {}

  constructor(
  ){
    super();
  }

  /** 表单结构数据 */
  @Mut() draftFormData = new FormData();

  showJSON=():void=>{
    console.log(this.draftFormData)
    console.log(this.draftFormData.getJsonData());
  }

  // 控制预览窗口显示隐藏
  @Mut() showPreview = false;
  toggleShowPreview=():void=>{
    this.showPreview = !this.showPreview;
  }
  
  // 中间草稿区实例对象
  @Link() fdnDraft?: FdnDraft;

  @Hook('Mounted')
  onMounted(){
    this.draftFormData.loadWinSize();
    window.onresize = ()=>{
      this.draftFormData.loadWinSize();
    }
  }

  // 保存FormData到浏览器
  saveToBrowser=()=>{
    localStorage.setItem('draftFormData',JSON.stringify(this.draftFormData.getJsonData()));
    message.success('保存成功！',2);
  }

  // 从浏览器加载FormData
  loadFromBrowser=()=>{
    this.draftFormData.loadFromJsonData(JSON.parse(localStorage.getItem('draftFormData') as string));
    message.success('加载成功！',2);
  }

  @Link() formPreview?:FormPreview;

  render() {
    
    return (
      <Card 
        class={[moduleCss['form-designer']]} 
        title={(
          // 左上角标题
          <span style={{fontWeight:'bolder'}}>表单设计器</span>
        )}
      >
        {{
          extra:()=>(
            // 右上角工具栏按钮
            <Space>
              <Button onClick={()=>{console.log(this.draftFormData.codeValueObj)}} size='small'>测试</Button>
              <Button onClick={this.showJSON} size='small'>JSON</Button>
              <Button onClick={this.saveToBrowser} size='small'>存入浏览器</Button>
              <Button onClick={this.loadFromBrowser} size='small'>从浏览器加载</Button>
              <Button onClick={this.toggleShowPreview} size='small'>预览</Button>
              <Button onClick={()=>{this.draftFormData.clear()}} size='small'>清空</Button>
            </Space>
          ),
          default:()=>(
            // 卡片内容：设计器布局
            <Layout
              class={moduleCss['layout']}
            >
              {/* 左边界面：备选组件区 */}
              <LayoutSider class={moduleCss['left-aside']} >
                <FdnReserve />
              </LayoutSider>
              <Layout
                class={moduleCss['layout']}
                hasSider 
              >
                {/* 中间界面：表单草稿区 */}
                <LayoutContent class={moduleCss['content']} >
                  <FdnDraft formData={this.draftFormData} />
                </LayoutContent>
                {/* 右边界面：属性设置区 */}
                <LayoutSider class={moduleCss['right-aside']} >
                  <FdnConfig formData={this.draftFormData} />
                </LayoutSider>
              </Layout>
              {/* 表单预览弹窗 */}
              <Modal
                visible={this.showPreview}
                title='预览'
                class={[moduleCss['preview-modal']]}
                onCancel={()=>{this.showPreview=false}}
              >
                {{
                  default:()=>(<FormPreview ref='formPreview' formData={this.draftFormData} />),
                  footer:()=>(<Space>
                    <Button onClick={()=>{
                      this.formPreview?.triggerValidate();
                    }}>校验</Button>
                    <Button onClick={()=>{
                      this.formPreview?.triggerPrintData();
                      message.success('表单数据输出在控制台！',2);
                    }}>取值</Button>
                    <Button onClick={()=>{
                      this.showPreview=false
                    }}>关闭</Button>
                  </Space>)
                }}
              </Modal>
            </Layout>
          )
        }}
      </Card>
    )
  }
}